@nuxtjs/proxy

What is @nuxtjs/proxy?

@nuxtjs/proxy is a Nuxt.js module that allows you to easily configure proxy middleware for your Nuxt.js application. This is particularly useful for handling API requests during development, avoiding CORS issues, and routing requests to different backends.

What are @nuxtjs/proxy's main functionalities?

Basic Proxy Setup

This feature allows you to set up a basic proxy configuration. In this example, any request to `/api/` will be proxied to `http://api.example.com`, and the `/api/` prefix will be removed from the request path.

json
{
  "modules": [
    "@nuxtjs/proxy"
  ],
  "proxy": {
    "/api/": {
      "target": "http://api.example.com",
      "pathRewrite": { "^/api/": "" }
    }
  }
}

Multiple Proxies

This feature allows you to set up multiple proxy configurations. In this example, requests to `/api/` are proxied to `http://api.example.com`, and requests to `/auth/` are proxied to `http://auth.example.com`.

json
{
  "modules": [
    "@nuxtjs/proxy"
  ],
  "proxy": {
    "/api/": {
      "target": "http://api.example.com",
      "pathRewrite": { "^/api/": "" }
    },
    "/auth/": {
      "target": "http://auth.example.com",
      "pathRewrite": { "^/auth/": "" }
    }
  }
}

Custom Proxy Options

This feature allows you to customize proxy options. In this example, `changeOrigin` is set to `true` to change the origin of the host header to the target URL, and `secure` is set to `false` to allow self-signed SSL certificates.

json
{
  "modules": [
    "@nuxtjs/proxy"
  ],
  "proxy": {
    "/api/": {
      "target": "http://api.example.com",
      "pathRewrite": { "^/api/": "" },
      "changeOrigin": true,
      "secure": false
    }
  }
}

Other packages similar to @nuxtjs/proxy

http-proxy-middleware

http-proxy-middleware is a popular Node.js package for creating proxy middleware. It offers a wide range of customization options and can be used with various frameworks like Express, Koa, and more. Compared to @nuxtjs/proxy, it requires more manual setup but offers greater flexibility.

axios

axios is a promise-based HTTP client for the browser and Node.js. While it is not a proxy middleware, it can be used in conjunction with proxy settings to handle API requests. It is more focused on making HTTP requests rather than setting up proxies, but it can be configured to work with proxy servers.

node-http-proxy

node-http-proxy is a full-featured HTTP proxy for Node.js. It provides a robust set of features for creating proxy servers and routing HTTP requests. It is more low-level compared to @nuxtjs/proxy and requires more configuration, but it offers extensive customization options.

README

@nuxtjs/proxy

Proxy support for nuxt server

📖 Release Notes

Features

✓ Path rewrites

✓ Host based router (useful for staging/test)

✓ Logs / Proxy Events

✓ WebSockets

✓ Auth / Cookie

✓ ...See http-proxy-middleware docs

⚠ Does not work in generated/static mode!

Setup

1. Add @nuxtjs/proxy dependency to your project

yarn add @nuxtjs/proxy # or npm install @nuxtjs/proxy

1. Add @nuxtjs/proxy to the modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    '@nuxtjs/proxy',

    // With options
    ['@nuxtjs/proxy', { pathRewrite: { '^/api' : '/api/v1' } }]
  ]
}

• Define as many as proxy middleware you want in proxy section of nuxt.config.js (See proxy section below)

Options

• changeOrigin and ws options are enabled by default.

[optional] You can provide default options to all proxy targets by passing options to module options.

proxy

You can provide proxy config using either object or array.

Array Config

You can use shorthand syntax to configure proxy:

{
  proxy: [
    // Proxies /foo to http://example.com/foo
    'http://example.com/foo',

    // Proxies /api/books/*/**.json to http://example.com:8000
    'http://example.com:8000/api/books/*/**.json',

    // You can also pass more options
    [ 'http://example.com/foo', { ws: false } ]
  ]
}

Object Config

Keys are context

{
  proxy: {
    // Simple proxy
    '/api': 'http://example.com',

    // With options
    '/api2': { target: 'http://example.com', ws: false },

    // Proxy to backend unix socket
    '/api3': {
      changeOrigin: false,
      target: { socketPath: '/var/run/http-sockets/backend.sock' }
    }
  }
}

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using npm run dev

License

MIT License

Copyright (c) Nuxt Community